{% extends 'base.html' %}

{% block title %}
    惠房网-{{ city }}租房信息-{{ city }}出租房源  租房|新房|二手房_【{{ city }}惠房租房】
{% endblock %}

{% block styles %}
    {{ super() }}
    <!-- 引入租房列表页样式文件renthouse.css -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/renthouse/renthouse.css') }}">
{% endblock %}

{% block content %}
    {% block newcontent %}
        <!-- 头部区域 -->
        <header class="headers">
            <div class="w">
                <div class="title">
                    <!-- logo模块 -->
                    <a href="{{ url_for('house_bp.renthouse',city=city) }}" class="logo" title="{{ city }}租房">
                        <img src="{{ url_for('static',filename='images/hz_logo.png') }}" alt="">
                        <span>惠房租房</span>
                    </a>
                    <span class='split'></span>
                    <a href="{{ url_for('house_bp.city') }}" class="s-city">
                        {{ city }}
                    </a>

                    <!-- 区域 -->
                    <ul class="most-area">
                        <li class="first"><a href="javascript:;">热门小区：</a></li>
                        {% for data in datas[:5] %}
                            <li><a href="javascript:;">{{ data.community }}</a></li>
                        {% endfor %}
                    </ul>
                </div>
                <div class="bottom">
                    <p class="first"><a href="{{ url_for('house_bp.renthouse',city=city) }}">首页</a></p>
                    <p><a href="javascript:;">整租</a></p>
                    <p><a href="javascript:;">合租</a></p>
                    <p><a href="javascript:;">地图找房</a></p>
                    <p><a href="javascript:;">品质租房</a></p>
                    <p><a href="javascript:;">惠房指数</a></p>
                    <p><a href="javascript:;">安全指标</a></p>
                    <p><a href="javascript:;">下载APP</a></p>
                </div>
            </div>
        </header>
        <!-- 筛选区域 -->
        <div class="filter w">
            <!-- 城市区域 -->
            <div class="position">
                <div class="post-hd">
                    <span class="wz">位置</span>
                    <div class="area">
                        <a href="javascript:;">
                            按区域
                            <span class="arrow1"></span>
                        </a>
                        <a href="javascript:;">
                            按地铁线
                            <span class="arrow2"></span>
                        </a>
                    </div>
                </div>
                <div class="post-bd">
                    <ul class="arealist">
                        {% for area in areas %}
                            <li><a href="javascript:;">{{ area.area_name }}</a></li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <!-- 租房方式 -->
            <ul class="rentmode">
                <li class="mode"><a href="javascript:;">方式</a></li>
                <li><a href="javascript:;">不限</a></li>
                <li><a href="javascript:;">整租</a></li>
                <li><a href="javascript:;">合租</a></li>
            </ul>
        </div>
        <!-- 内容区域 -->
        <div class="content w">
            <!-- 左边数据区域 -->
            <div class="leftcontent">
                <div class="texttitle">
                    <div class="resultDes">
                        <div class="total">
                            为您找到
                            <span> {{ rent_num }} </span>
                            套
                            <a href="javascript:;">{{ city }}租房</a>
                        </div>
                    </div>
                </div>
                <div class="orderFilter">
                    <div class="orderTaa">
                        <ul>
                            <li class="selectoe">
                                <a href="{{ url_for('house_bp.renthouse',city=city) }}">
                                    <h2>{{ city }}出租</h2>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <h2>经纪人</h2>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <h2>最新上架</h2>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <h2>面积</h2>
                                </a>
                            </li>
                            <li>
                                <a href="javascript:;">
                                    <h2>价格</h2>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="datalist">
                    <ul class="datas">
                        {% for rent in data_list.items %}
                        <li class="data">
                            <a href="{{ url_for('house_bp.renthouse',city=city) }}?rentid={{ rent.rent_id }}" class="dataimg">
                                <img src="{{ rent.house_img }}" alt="">
                            </a>
                            <div class="info">
                                <div class="title">
                                    <a href="{{ url_for('house_bp.renthouse',city=city) }}?rentid={{ rent.rent_id }}" class="dataview" title="{{ rent.title }}">
                                        {{ rent.title }}
                                    </a>
                                </div>
                                <div class="address">
                                    <div class="flood">
                                        <span></span>
                                        <div class="community">
                                            {{ rent.area_name }} - {{ rent.shop_name }} - {{ rent.community }}
                                        </div>
                                    </div>
                                    <div class="housesinfo">
                                        <span></span>
                                        {{ rent.house_type}}&nbsp;&nbsp;|&nbsp;&nbsp;{{ rent.area }}&nbsp;&nbsp;|&nbsp;&nbsp;{{ rent.house_face}}&nbsp;&nbsp;|&nbsp;&nbsp;{{ rent.floor }}
                                    </div>
                                    {% if rent.broker.broker_name %}
                                        <div class="followInfo">
                                            <span></span>
                                            租房联系人：{{ rent.broker.broker_name }} · {{ rent.broker.contact }}
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="priceInfo">
                                    {% if rent.rent_price %}
                                        <div class="rentPrice">
                                            <span class="price">{{ rent.rent_price }}</span>
                                            <span class="unit">元/月</span>
                                        </div>
                                    {% else %}
                                        <div class="rentPrice">
                                            <span>价格待定</span>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
                <!-- 翻页 -->
                <div class="next-page">
                <div class="page-left">
                    <span>惠房网 &nbsp;>&nbsp; </span>
                    <span>{{ city }}房源 &nbsp;>&nbsp; </span>
                    <span>{{ city }}租房</span>
                </div>
                <div class="page-right">
                    <ul>
                        {% if data_list.has_prev %}
                            <li {% if not data_list.has_prev %} class="disabled" {% else %} class="nexts" {% endif %}>
                                <a href="{{ url_for('house_bp.renthouse',city=city) }}?page={{ data_list.prev_num }}">上一页</a>
                            </li>
                        {% endif %}
                        
                        {% if data_list.pages > 5 %}
                            {% if data_list.page < 5 %}
                                {% for page_num in range(1,6) %}
                                    <li {% if data_list.page == page_num %} class="pages current" {% endif %}>
                                        <a href="{{ url_for('house_bp.renthouse',city=city) }}?page={{ page_num }}">{{ page_num }}
                                        </a>
                                    </li>
                                {% endfor %}
                            {% else %}
                                {% if data_list.next_num %}
                                    {% for page_num in range(data_list.next_num - 4,data_list.next_num + 1) %}
                                        <li {% if data_list.page == page_num %} class="pages current" {% endif %}>
                                            <a href="{{ url_for('house_bp.renthouse',city=city) }}?page={{ page_num }}">{{ page_num }}
                                            </a>
                                        </li>
                                    {% endfor %}
                                {% else %}
                                    {% for page_num in range(data_list.pages - 4,data_list.pages + 1) %}
                                        <li {% if data_list.page == page_num %} class="pages current" {% endif %}>
                                            <a href="{{ url_for('house_bp.renthouse',city=city) }}?page={{ page_num }}">{{ page_num }}
                                            </a>
                                        </li>
                                    {% endfor %}
                                {% endif %}

                            {% endif %}
                        {% else %}
                            <!-- 如果总页数小于5执行 -->
                            {% for page_num in range(1,data_list.pages + 1) %}
                                <li {% if data_list.page == page_num %} class="pages current" {% endif %}>
                                    <a href="{{ url_for('house_bp.renthouse',city=city) }}?page={{ page_num }}">{{ page_num }}
                                    </a>
                                </li>
                            {% endfor %}
                        {% endif %}
                        
                        {% if data_list.has_next %}
                            <li {% if not data_list.has_next %} class="disabled" {% else %} class="nexts"{% endif %}>
                                <a href="{{ url_for('house_bp.renthouse',city=city) }}?page={{ data_list.next_num }}">下一页</a>
                            </li>
                        {% endif %}
                    </ul>
                </div>
                </div>
            </div>

            <!-- 右边广告区域 -->
            <div class="rightcontent">
                <div class="recommend-list">
                    <p class="head">热门房源</p>
                    {% for rent in datas[:15] %}
                        <div class="recommend-item">
                            <a href="{{ url_for('house_bp.renthouse',city=city) }}?rentid={{ rent.rent_id }}">
                                <img src="{{ rent.house_img }}" alt="{{ rent.title }}">
                                <p class="title">{{ rent.title }}</p>
                                <p class="desc">{{ rent.area_name }}/{{ rent.house_type }}</p>
                                <p class="price">{{ rent.rent_price }}元/月</p>
                            </a>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>>
    {% endblock %}
{% endblock %}